import { useState} from "react";
// import { useNavigate } from "react-router-dom";
import "./index.scss";

import Win from "./components/Win";
import Fail from "./components/Fail";
import Battlefield from "./components/Battlefield";

const Game = () => {
  // const navigate = useNavigate();

  /**
   * 返回上一页
   */
  function handleGoBack() {
    // navigate(-1); // 或者使用 history.go(-1)
    handleClickOpen();
  }

  const [open, setOpen] = useState(false);

  const [isWin, setisWin] = useState(false);

  const handleClickOpen = () => {
    setisWin(!isWin);
    setOpen(true);
    // navigate(-1);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <>
      <div className="pk-game-container">
        {/* 金额 */}
        <div className="currency-items">
          <div className="item-box">
            <img className="img-icon" src="/images/coin2.png" />
            <div className="show-box">
              <span className="value">1000</span>
            </div>
          </div>
          <div className="item-box">
            <img className="img-icon" src="/images/diamond2.png" />
            <div className="show-box">
              <span className="value">460</span>
            </div>
          </div>
          <div className="item-box">
            <img className="img-icon" src="/images/ton.png" />
            <div className="show-box">
              <span className="value">120</span>
            </div>
          </div>
        </div>

        {/* 游戏内容 */}
        <div className="game-content-box">
          {/* 敌方信息 */}
          <div className="player-info-box enemy-box">
            <div className="photo-box">
              <img src="/images/user_photo.png" />
            </div>
            <div className="info-box">
              <div className="player-info">
                <div className="name-box">
                  <span className="name">特朗普</span>
                  <img className="img-icon" src="/images/grade_1.png" />
                  <span className="status">青铜I</span>
                </div>
                <div className="prop-box">
                  <img src="/images/porp_1.png" alt="" />
                  <img src="/images/porp_2.png" alt="" />
                </div>
              </div>
            </div>
            <div className="blood-bar">
              <div className="blood-bar-val" style={{ width: "50%" }}></div>
            </div>
          </div>
          {/* 战斗场景 */}
          <Battlefield />

          {/* 我方信息 */}
          <div className="player-info-box my-box">
            <div className="photo-box">
              <img src="/images/user_photo.png" />
            </div>
            <div className="info-box">
              <div className="player-info">
                <div className="name-box">
                  <span className="name">艾琳娜</span>
                  <img className="img-icon" src="/images/grade_1.png" />
                  <span className="status">青铜I</span>
                </div>
                <div className="prop-box">
                  <img src="/images/porp_1.png" alt="" />
                  <img src="/images/porp_2.png" alt="" />
                </div>
              </div>
              <div className="list-min-box">
                <ul>
                  <li>
                    <img src="/images/dinosaur1.png" alt="" />
                  </li>
                  <li>
                    <img src="/images/dinosaur2.png" alt="" />
                  </li>
                  <li>
                    <img src="/images/dinosaur1.png" alt="" />
                  </li>
                  <li>
                    <img src="/images/dinosaur1.png" alt="" />
                  </li>
                </ul>
              </div>
            </div>
            <div className="blood-bar">
              <div className="blood-bar-val" style={{ width: "30%" }}></div>
            </div>
          </div>
        </div>

        {/* 投降 */}
        <div className="bottom-box">
          <div className="surrender-btn" onClick={handleGoBack}>
            <span>投降</span>
          </div>
        </div>
      </div>
      {/* 胜利 */}
      {isWin ? (
        <Win open={open} onClose={handleClose} />
      ) : (
        <Fail open={open} onClose={handleClose} />
      )}
    </>
  );
};

export default Game;
